<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>这是一个秒杀</title>

    <link rel="stylesheet" href="/stylesheets/base.css">
    <style>

        ._all_box {
            width: 12rem;
            flex-wrap: wrap;
            /*height:4.2rem;*/
            /*border:2px solid #FF6F6F;*/
            margin: 0.5rem auto;
            /*justify-content :space-between;*/
            border-radius: 0.1rem;
        }

        ._ms_box {
            width: 2rem;
            height: 3rem;
            border: 1px solid #eaeaea;
            margin: 0.25rem;
        }

        .img_box {
            font-size: 0.3em;
            width: 2rem;
            height: 1.5rem;
            background-color: #FFFE9F;
        }

        .but_box {
            width: 2rem;
            background-color: #fff;
        }

        .startTime, .endTime, .number {
            font-size: 0.15em;
            margin-top: 0.1rem;
        }
    </style>
</head>
<body>
<div class="uf _all_box">
    <section class="_ms_box">
        <div class="uf _uf_center img_box">第一个商品</div>
        <div class="but_box">
            <div id="num" class="uf _uf_center number">剩余数量:--</div>
            <div id="button" class="submit uf _uf_center button rosy" onclick="buy()">秒杀</button>
            </div>
    </section>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>

    var isbuy = false;

    $(document).ready(function () {
        var deviceWidth = document.documentElement.clientWidth;
        if (deviceWidth > 750) deviceWidth = 750;
        document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
        var job = setInterval(function () {
            $.ajax({
                type: 'get',
                url: 'seckill/getCount',
                success: function (result) {
                    if (result.num > 0) {
                        $("#num").html("剩余数量:" + result.num);
                        $("#button").css("background", "#e77005")
                    } else {
                        $("#num").html("剩余数量:0");
                        $("#button").css("background", "#ccc")
                        window.clearInterval(job)
                    }
                }

            })

        }, 1000)
    })

    function buy() {
        if (isbuy) {
            alert("不能购买")
        } else {
            $.ajax({
                type: 'post',
                url: 'seckill/seckill',
                success: function (result) {
                    alert(result.messages)
                }
            })
        }
    }
</script>
</html>